<template>
  <div>
    <el-dialog
      title="试卷预览"
      append-to-body
      :show-close="true"
      @closed="closeQuestionDialog"
      :visible.sync="dialogFormVisible"
    >
      <el-row class="boxquestionInfoData">
        <el-col :span="24">
          <div v-for="(questionData, index) in questionInfoData" :key="index">
            <div>
              <b>{{ index + 1 + ". " }}</b>
              <b :id="index + 1">{{ questionData.stem }}</b>
              <b style="color: #b5b8c3" v-if="questionData.topicType == 1"
                >（单选题） <span>{{ questionData.subjectGrade }}</span>
              </b>
              <b style="color: #b5b8c3" v-if="questionData.topicType == 2"
                >（多选题）<span>{{ questionData.subjectGrade }}</span>
              </b>
              <b style="color: #b5b8c3" v-if="questionData.topicType == 3"
                >（判断题）<span>{{ questionData.subjectGrade }}</span>
              </b>
              <b style="color: #b5b8c3" v-if="questionData.topicType == 4"
                >（简答题）<span>{{ questionData.subjectGrade }}</span>
              </b>
              <b style="color: #b5b8c3" v-if="questionData.topicType == 5"
                >（填空题）<span>{{ questionData.subjectGrade }}</span>
              </b>
            </div>
            <div v-if="questionData.topicType == 1">
              <div
                v-for="(item, index) in JSON.parse(questionData.options)"
                :key="index"
                class="radio_item"
              >
                <el-radio-group v-model="questionData.subjectAnswer">
                  <el-radio :label="item.label">
                    {{ item.label }}. &nbsp;
                    <label>{{ item.questionStems }}</label>
                  </el-radio>
                </el-radio-group>
              </div>
              <span>参考答案:{{ questionData.answer }}</span>
            </div>
            <div v-if="questionData.topicType == 3">
              <div class="radio_item">
                <el-radio :label="'true'" v-model="questionData.subjectAnswer"
                  >正确</el-radio
                >
              </div>
              <div class="radio_item">
                <el-radio :label="'false'" v-model="questionData.subjectAnswer"
                  >错误</el-radio
                >
              </div>
              <span>参考答案:{{questionData.answer == "true" ? "正确" : "错误"}}</span>
            </div>
            <div v-if="questionData.topicType == 2">
              <div
                v-for="(item, index) in questionData.options"
                :key="index"
                class="radio_item"
              >
                <el-checkbox-group v-model="questionData.subjectAnswer">
                  <el-checkbox :label="item.label">
                    {{ item.label }}. &nbsp;
                    <label>{{ item.questionStems }}</label>
                  </el-checkbox>
                </el-checkbox-group>
              </div>
              <span>参考答案:{{ questionData.answer }}</span>
            </div>
            <div v-if="questionData.topicType == 4">
              <div
                v-for="(item, index) in questionData.options"
                :key="index"
                class="radio_item"
              >
                <el-checkbox-group v-model="questionData.subjectAnswer">
                  <el-checkbox :label="item.label">
                    {{ item.label }}. &nbsp;
                    <label>{{ item.questionStems }}</label>
                  </el-checkbox>
                </el-checkbox-group>
              </div>
              <span>参考答案:{{ questionData.answer }}</span>
            </div>
            <div v-if="questionData.topicType == 5">
              <div
                v-for="(item, index) in questionData.options"
                :key="index"
                class="radio_item"
              >
                <el-checkbox-group v-model="questionData.subjectAnswer">
                  <el-checkbox :label="item.label">
                    {{ item.label }}. &nbsp;
                    <label>{{ item.questionStems }}</label>
                  </el-checkbox>
                </el-checkbox-group>
              </div>
              <span>参考答案:{{ questionData.answer }}</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
// import { getDetails } from "@/api/specialWork/testPaper.js"
export default {
  name: "question-preview",
  props: {
    openFlag: {
      type: Boolean,
      required: false,
    },
    questionInfo: {
      type: Object,
      required: true,
    },
  },

  watch: {
    openFlag(val) {
      this.dialogFormVisible = val
    },
    questionInfo: {
      handler(val) {
        if (val) {
          getDetails(val.id).then((res) => {
            this.questionInfoData = res.data.subjects
          })
        }
      },
      deep: true,
    },
  },

  data() {
    return {
      dialogFormVisible: false,
      questionInfoData: [],
    }
  },

  mounted() {
    this.dialogFormVisible = this.openFlag
  },

  methods: {
    close() {
      this.dialogFormVisible = false
      this.$emit("closeQuestionDialog")
    },
    closeQuestionDialog() {
      this.dialogFormVisible = false
      this.$emit("closeQuestionDialog")
    },
  },
}
</script>
<style lang="scss" scoped>
.radio_item p {
  display: inline-block;
}
</style>
<style scoped>
.radio_item {
  margin: 20px;
}
.boxquestionInfoData {
  height: 80vh;
  overflow: auto;
}
</style>
